import React, { PureComponent } from "react";
import { createRef, forwardRef } from "react/cjs/react.production.min";

export default class App extends PureComponent {
  constructor() {
    super();
    this.homeRef = createRef();
    this.spanRef = createRef();
    this.FnHomeRef = createRef();
  }
  render() {
    return (
      <div>
        <span ref={this.spanRef}>ref</span>
        <FnHome ref={this.FnHomeRef}></FnHome>
        <Home ref={this.homeRef}></Home>
        <button onClick={(e) => this.printRef()}>add</button>
      </div>
    );
  }
  printRef() {
    console.log(this.homeRef.current);
    console.log(this.spanRef.current);
    console.log(this.FnHomeRef.current);
  }
}

class Home extends PureComponent {
  render() {
    return <div>Home</div>;
  }
}

// 注意这个 forwardRef 就是一个高阶组件函数
const FnHome = forwardRef(function (props, ref) {
  return <div ref={ref}>FnHome</div>;
});
